<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
        <div class="avatar_box">
            <img src="../assets/logo.png" alt="">
        </div>


        <!-- 登入表单区域 -->
        <el-form ref="LoginFormRef" :model="login_form" :rules='login_form_rules' class="login_el_form" label-width="80px">


       <!-- 用户名输入框 -->
         <el-form-item label="用户名:" prop="username" >
           <el-input v-model='login_form.username' prefix-icon="iconfont icon-person " ></el-input>
          </el-form-item>

         <!-- 密码输入框 -->
          <el-form-item label="密码:" prop="password" >
           <el-input v-model='login_form.password' prefix-icon="iconfont icon-password" type="password" >
          </el-input>
          </el-form-item>



    <el-form-item class="btns">
    <el-button type="primary"  @click='login_validation'>登入</el-button>
    <el-button type="info"  @click="resetLoginForm">重置</el-button>
  </el-form-item>
     </el-form>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      login_form: {
        username:'admin',
        password:'123456',
         
      },
      login_form_rules: {
        username:[
           { required: true, message: '请输入用户名', trigger: 'blur' },
           { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        password:[
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
      
      
        
      }
    },
    methods:{
        resetLoginForm() {
           this.$refs.LoginFormRef.resetFields();
        },

      


        login_validation(){
          this.$refs.LoginFormRef.validate(async valid => {
            if(!valid) return;
            const { data:res }= await this.$http.post('login',this.login_form);

            if(res.meta.status !== 200){
             return  this.$message.error('登入失败');;

            }else{
          this.$message.success('登入成功');
            }
            window.sessionStorage.setItem('token',res.data.token);
            this.$router.push('home')

            })
        },


        

  }

}
</script>

<style lang='less' scoped>
 .login_container{
     color:aqua;
     background-color: #333333;
     height: 100%;

    
 }
 .login_box {
     width:450px;
     height:300px ;
     background-color:#fff;
     border-radius:5px ;
     position: absolute;
     top:50%;
     left:50%;
     border:2px solid rgb(170, 170, 170);
     transform: translate(-225px,-150px);
          box-shadow: 0px -0px 15px 3px snow;

       .avatar_box {
     width: 130px;
     height: 130px;
     border-radius: 75px;
     background-color: #fff;
     box-shadow: 0px -0px 15px 3px black;
     border: 10px double rgb(202, 202, 202);
     position: absolute;
     left: 50%;
     transform: translate(-75px,-65px);
     text-align: center;
     overflow: hidden;

        
 }
 }
 .avatar_box>img {
        width: 100%;
        height: 100%;
        position: absolute;
        top:50%;
        transform: translate(-50%,-40%);
 } 
 .login_el_form {
      position:absolute;
      bottom:0;
      width:100%;
      padding: 0 20px;
      box-sizing: border-box;
 }
 .btns {
   display:flex;
   justify-content: flex-end;
 }

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
}

 
</style>
